<template>
  <div class="echartsBox">
    <div v-if="list.length > 0" id="abnormalLine" class="allWidthHeight" />
    <div v-else class="kong">暂无数据</div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  props: {},
  data() {
    return {
      myChart: null,
      value1: "",
      list: [],
    };
  },
  watch: {},
  mounted() {},
  methods: {
    infoSize() {
      this.myChart.resize();
    },
    async getAbnormalStat() {
      const res = await this.$axios.get("/board/equip/abnormal/abnormalStat");
      if (res?.data.code === 200) {
        this.list = res.data.data;
        setTimeout(async () => {
          this.setAbnormalLine(res.data.data);
        }, 500);
      }
    },
    /* 设备异常统计echarts */
    setAbnormalLine(data) {
      if (this.list.length > 0) {
        let name = [];
        let num = [];
        data.forEach((item) => {
          name.push(item.equipName);
          num.push(item.num);
        });
        const option = {
          grid: {
            left: "8%", // 距离左侧的距离
            right: "2%", // 距离右侧的距离
            top: "15%", // 距离顶部的距离
            bottom: "23%", // 距离底部的距离
          },
          legend: {
            show: false,
          },
          xAxis: [
            {
              splitLine: { show: false },
              axisPointer: {
                type: "shadow",
              },
              axisLine: {
                // 坐标轴 轴线
                lineStyle: {
                  color: "#fff",
                  width: 1,
                  type: "solid",
                },
              },
              axisLabel: {
                color: "#fff",
                formatter: "{value}",
                rotate: 50,
                interval: 0, // 代表显示所有x轴标签显示
              },
              axisTick: {
                show: false,
              },
              type: "category",
              data: name,
            },
          ],
          yAxis: [
            {
              axisLabel: {
                show: true,
                color: "#fff",
              },
              type: "value",
            },
          ],
          dataZoom: [
            {
              type: "inside",
            },
          ],
          series: [
            {
              type: "bar",
              data: num,
              barWidth: "50%",
              label: {
                formatter: "{c}",
                show: true,
                position: "top",
                fontWeight: "normal",
                fontSize: "10",
                color: "#fff",
              },
              itemStyle: {
                // 设置渐变色，使得柱体亮度更高
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#FFD700" }, // 渐变为金黄色
                  { offset: 1, color: "#FFA500" },
                ]),
                // 设置更亮的阴影颜色
                shadowBlur: 20,
                shadowColor: "rgba(255, 255, 255, 0.5)", // 使用白色阴影
                shadowOffsetX: 5,
                shadowOffsetY: 5,
              },
              emphasis: {
                // 鼠标悬停时的样式
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#00FFFF" }, // 从浅蓝开始
                    { offset: 1, color: "#1592FE" }, // 到深蓝色·
                  ]),
                  shadowBlur: 25,
                  shadowColor: "rgba(255, 255, 255, 0.8)", // 更强的白色阴影
                  shadowOffsetX: 6,
                  shadowOffsetY: 6,
                },
              },
            },
          ],
        };
        if (
          this.myChart != null &&
          this.myChart !== "" &&
          this.myChart !== undefined
        ) {
          this.myChart.dispose(); // 销毁
        }
        this.myChart = echarts.init(document.getElementById("abnormalLine"));
        this.myChart.clear();
        this.myChart.setOption(option, true);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.echartsBox {
  width: 100%;
  padding: 0 15px;
  height: 100%;
}
.kong {
  background-size: 50% auto;
}
</style>
